<template>
  <div class="add-user">
    <el-dialog title="授权角色" :visible.sync="visible" width="600px" @close="formCancel()">
      <el-table ref="tableData" :data="tableData" style="width: 100%;" row-key="id" @selection-change="select">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="code" label="唯一编码" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GetRoleList, GetRoleUser, SetRoleUser } from '@/api/system'
export default {
  name: 'AuthorizeRole',
  components: {},
  props: {},
  data() {
    return {
      visible: false,
      tableData: [],
      defaultSelect: [],
      list: [],
      selectArr: [],
      id: '',
      timer: null
    };
  },
  created() {},
  mounted() {},
  destroyed() {
    clearTimeout(this.timer)
  },
  methods: {
    async show(id) {
      this.id = id
      await GetRoleList({ tenantId: '1377813547706261506', page: 1, size: 10000 }).then(res => {
        res.success && (this.tableData = res.data.records)
      })
      this.visible = true
      await GetRoleUser({ id: id }).then(res => {
        if (res.success) {
          this.defaultSelect = res.data
          const list = []
          this.tableData.forEach(item => {
            this.defaultSelect.forEach(v => {
              if (item.id === v) {
                list.push(item)
              }
            })
          })
          this.list = list
          if (list.length > 0) {
            list.forEach(row => {
              this.$refs.tableData.toggleRowSelection(row, true)
            })
          }
        }
      })
    },
    submit() {
      const list = this.selectArr
      const ids = []
      list.forEach(v => {
        ids.push(v.id)
      })
      SetRoleUser({ id: this.id, ids: ids }).then(res => {
        res.success && this.$message({
          message: res.msg,
          type: 'success'
        })
        this.visible = false
        this.$emit('reload')
      })
    },
    formCancel() {
      this.visible = false
    },
    select(node) {
      this.selectArr = node
    }
  }
}
</script>

<style lang="scss" scoped>
.add-user{
  ::v-deep .el-dialog__body{
    padding-top: 0px;
  }
  .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    span:first-child{
      display: inline-block;
      width: 60px;
      height: 1px;
      border-top: 1px solid #e8e8e8;
    }
    span:nth-child(2) {
      display: inline-block;
      width: 100px;
      text-align: center;
    }
    span:last-child {
      display: inline-block;
      flex: 1;
      height: 1px;
      border-top: 1px solid #e8e8e8;
    }
  }
  ::v-deep .el-tree-node__content{
    height: 40px;
  }

  .org-box{
    width: 240px;
    height: 50px;
    position: relative;
    overflow: visible;
    .org-name{
      position: absolute;
      top: 0;
      left: 0;
      width: 240px;
      height: 40px;
      border: 1px solid #DCDFE6 ;
      padding: 0 20px 0 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .filter-tree{
      position: absolute;
      width: 100%;
      top: 45px;
      left: 0;
      z-index: 99;
      border: 1px solid #E4E7ED;
    }
  }
  .info-attach{
    ::v-deep .el-form-item__content{
      width: 80%;
    }
  }
  .add-line{
    width: 90%;
    height: 30px;
    margin: 0 auto;
    border: 1px dashed #DCDFE6;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      display: block;
    }
  }

  .org-table{
    width: 200px;
    min-height: 42px;
    overflow: visible;
    .org-name{
      width: 200px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1px solid #DCDFE6 ;
      padding: 0 20px 0 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .filter-tree{
      margin-top: 2px;
      border: 1px solid #E4E7ED;
    }
  }
}
</style>
